<template>
  <div class="container">
    <div class="top">
      <div><img src="@/assets/images/logo.png" alt="" class="img" /></div>
      <div class="nav">
        <span :class="fullpath == '/' ? 'active' : ''" @click="navigate('/')">首页</span>
        <span :class="fullpath == '/etc' ? 'active' : ''" @click="navigate('/etc')">ETC</span>
        <span :class="fullpath == '/streaming' ? 'active' : ''" @click="navigate('/streaming')">流媒体后视镜</span>
      </div>
    </div>
    <!-- <div style="position: fixed;">当前页面滚动高度: {{ scrollHeight }}</div> -->
    <div class="content">
      <div class="headline">
        <img src="@/assets/images/headline.png" alt="" />
      </div>
      <div class="introduce">
        <!-- 公司简介 -->
        <div class="item block">
          <img src="@/assets/images/synopsis.png" alt="" />
          <div class="citem">
            <div class="companyIntroduction">
              车易行科技发展有限公司，我们在汽车配件、生活用品和ETC服务领域深耕5年+，协助解答汽车问题400w+，致力于为企业和用户提供优质的车主体验与服务。
            </div>
            <div class="zitem">
              <div class="title">
                <img src="@/assets/images/dot.png" alt="" />
                <div>信任环境</div>
              </div>
              <div class="zcontent">
                <div class="text">车易行永远把客户利誉置于公司利益之上;</div>
                <img src="@/assets/images/support.png" alt="" />
              </div>
            </div>
            <div class="zitem">
              <div class="title">
                <img src="@/assets/images/dot.png" alt="" />
                <div>公司优势</div>
              </div>
              <div class="zcontent">
                <div class="text">
                  拥有全国ETC线上综合服务平台，用“互联网+”打造
                  了全新的服务模式，配套强大的ERP系统和客服中心;
                </div>
                <img src="@/assets/images/cooperate.png" alt="" />
              </div>
            </div>
            <div class="zitem">
              <div class="title">
                <img src="@/assets/images/dot.png" alt="" />
                <div>长期客户</div>
              </div>
              <div class="zcontent">
                <div class="text">
                  服务ETC激活车主100w+ 推荐品质汽车好物10w+;
                </div>
                <img src="@/assets/images/client.png" alt="" />
              </div>
              <div></div>
            </div>
          </div>
        </div>
        <!-- 公司产品 -->
        <div class="item block" ref="myElement">
          <img src="@/assets/images/products.png" alt="" />
          <div class="productsflex">
            <div class="productsitem">
              <div class="productsetc">
                <div class="title">
                  <img src="@/assets/images/dot.png" alt="" />
                  <span>ETC</span>
                </div>
                <div class="text">
                  <div>一站式线上申办</div>
                  <div>线上自助激活</div>
                  <div>全国畅行95折</div>
                </div>
                <div class="more" @click="etcrouter('/etc')">了解更多 ></div>
              </div>
            </div>
            <div class="productsitem">
              <div class="productsstreaming">
                <div class="title">
                  <img src="@/assets/images/dot.png" alt="" />
                  <span>广汽原厂流媒体</span>
                </div>
                <div class="text">
                  <div>原车替换安装</div>
                  <div>专车专用设计</div>
                  <div>前后切换</div>
                </div>
                <div class="more" @click="streamingrouter('/streaming')">
                  了解更多 >
                </div>
              </div>
            </div>
            <div class="productsitem">
              <div class="productsjvc">
                <div class="title">
                  <img src="@/assets/images/dot.png" alt="" />
                  <span>JVC车载音响</span>
                </div>
                <div class="text">
                  <div>一线品牌方案</div>
                  <div>专业汽车喇叭</div>
                  <div>为无损升级而生</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 公司业务 -->
        <div class="item block">
          <img src="@/assets/images/business.png" alt="" />
          <div class="thinking">
            <img src="@/assets/images/thinking.png" alt="" />
          </div>
        </div>
        <!-- 职业前景 -->
        <div class="item block">
          <img src="@/assets/images/careerprospects.png" alt="" />
          <!-- <XyzTransition  appear duration="auto" xyz="fade up-100% duration-10"> -->
          <div class="careerprospects">
            <div class="one">车易行用人唯才，<span>精英云集</span></div>
            <div class="careerprospectstext a">
              <div>我们深信，通力合作、团体精神和正直，</div>
              <div>会为我们的员工营造良好的环境，</div>
              <div>从而为我们的客户创造最佳的业绩。</div>
            </div>
            <div class="careerprospectstext b">
              <div>在推动思想和能力，甚至全球进步的道路上，</div>
              <div class="color">车易行都与您同在!</div>
            </div>
          </div>
          <!-- </XyzTransition> -->
        </div>
        <div class="record">
          <div class="adress">
            <div style="padding-bottom: 20px;">
              <span class="tltle">办公地点</span><span class="copy">广州市白云区元下底路1号17栋101房</span>
            </div>
            <div class="img">
              <div><img src="http://yxyt.oss-cn-hangzhou.aliyuncs.com/ghac/qrcore.jpg" alt="" /></div>
              <div style="text-align: center;">微信公众号</div>
            </div>
            <div class="center">
              Copyright © 2024 广州车易行科技发展有限公司 <span @click="goToBeianSite">粤ICP备20024691号-14</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const fullpath = ref("");
const scrollHeight = ref(0);
const goToBeianSite = () => {
  window.open('https://beian.miit.gov.cn/', '_blank');
}
const updateScrollHeight = () => {
  scrollHeight.value =
    document.documentElement.scrollTop || document.body.scrollTop;
  geteleheight();

  if (myElement.value) {
    const myElements = document.querySelectorAll(".zitem");
    const elementHeight = myElement.value.offsetHeight;
    if (scrollHeight.value - elementHeight > 0) {
      myElements.forEach((myElement) => {
        const elementHeight = myElement.offsetHeight;
        if (scrollHeight.value - elementHeight > 0) {
          myElement.querySelector(".title").classList.add("bli");
          myElement.querySelector(".zcontent").classList.add("zc");
        } else {
          myElement.querySelector(".title").classList.remove("bli");
          myElement.querySelector(".zcontent").classList.remove("zc");
        }
      });
    }
  }
  const careerProspects = document.querySelector(".careerprospects");
  const rect = careerProspects.getBoundingClientRect();
  const windowHeight = window.innerHeight;
  if (rect.top <= windowHeight && rect.bottom >= 0) {
    document.querySelector(".a").classList.add("bli");
    document.querySelector(".b").classList.add("bli");
    document.querySelector(".one").classList.add("zc");
  } else {
    document.querySelector(".a").classList.remove("bli");
    document.querySelector(".b").classList.remove("bli");
    document.querySelector(".one").classList.remove("zc");
  }
  window.addEventListener("scroll", updateScrollHeight, geteleheight);
};
const myElement = ref(0);
const geteleheight = () => {
  if (myElement.value) {
    const observer = new ResizeObserver((entries) => {
      const height = entries[0].target.offsetHeight;
      console.log("元素高度:", height);
    });
    observer.observe(myElement.value);
  }
};
onMounted(() => {
  // 初始化滚动高度
  updateScrollHeight();

  // 在组件挂载后获取当前路由的完整路径
  fullpath.value = router.currentRoute.value.fullPath;
  console.log(fullpath.value === "/etc");
  console.log("router", router.currentRoute.value.fullPath);
  // if (scrollHeight.value - myElement.value > 0) {
  //   console.log(0);
  // }
});
onUnmounted(() => {
  window.removeEventListener("scroll", updateScrollHeight, geteleheight);
});
const navigate = (p) => {
  router.push(p);
  window.scrollTo(0, 0);
};
const etcrouter = (p) => {
  router.push(p);
  window.scrollTo(0, 0);
};
const streamingrouter = (p) => {
  router.push(p);
  window.scrollTo(0, 0);
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  height: 100vh;
}

.top {
  height: 132px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  width: 100vw;
  background-color: #fff;
  z-index: 999;

  .img {
    height: 62px;
  }

  .nav {
    display: flex;

    span {
      margin-left: 90px;
      font-size: 32px;
      color: #000;
    }

    .active {
      color: #126ef9;
      padding-bottom: 10px;
      position: relative;
    }

    .active::after {
      content: "";
      position: absolute;
      bottom: -10px;
      width: 40px;
      height: 6px;
      background-color: #126ef9;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}

.content {
  padding: 0 170px;
  padding-top: 132px;
  background-clip: padding-box;
  box-sizing: border-box;
  background: url(http://yxyt.oss-cn-hangzhou.aliyuncs.com/ghac/background.png) no-repeat;
  background-size: cover;
  //   width: 100%;
  min-height: 100vh;
  /* 在移动端确保至少占满视口高度 */
  height: auto;

  /* 在PC端让高度根据内容自适应 */
  //   overflow: hidden;
  .headline img {
    width: 730px;
    margin-top: 114px;
  }

  .introduce {
    margin-top: 829px;

    .item {
      padding: 50px 120px;
      width: 100%;
      height: 702px;
      background-color: #fff;
      margin-bottom: 108px;
      box-sizing: border-box;

      .productsflex {
        display: flex;
        justify-content: space-between;

        .productsitem {
          height: 439px;
          display: flex;
          flex-direction: column-reverse;

          :hover {
            transform: scale(1.1);
          }

          .productsetc {
            background: url(@/assets/images/index_etc.png) no-repeat;
            background-size: cover;
            height: 439px;
            width: 406px;
            display: flex;
            flex-direction: column;
            align-items: center;

            .title {
              margin-top: 178px;
              display: flex;
              align-items: center;

              img {
                height: 16px;
              }
            }

            .text {
              margin-top: 20px;
              font-size: 26px;
              color: #000;
              display: flex;
              flex-direction: column;
              align-items: center;
            }

            .more {
              margin-top: 30px;
              color: #126ef9;
              font-size: 26px;
            }
          }

          .productsstreaming {
            background: url(@/assets/images/index_streaming.png) no-repeat;
            background-size: cover;
            height: 402px;
            width: 406px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .title {
              margin-top: 110px;
              display: flex;
              align-items: center;

              img {
                height: 16px;
              }
            }

            .text {
              margin-top: 20px;
              font-size: 26px;
              color: #000;
              display: flex;
              flex-direction: column;
              align-items: center;
            }

            .more {
              margin-top: 30px;
              color: #126ef9;
              font-size: 26px;
            }
          }

          .productsjvc {
            background: url(@/assets/images/index_jvc.png) no-repeat;
            background-size: cover;
            height: 421px;
            width: 406px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .title {
              margin-top: 66px;
              display: flex;
              align-items: center;

              img {
                height: 16px;
              }
            }

            .text {
              margin-top: 20px;
              font-size: 26px;
              color: #000;
              display: flex;
              flex-direction: column;
              align-items: center;
            }
          }
        }
      }

      .citem {
        .companyIntroduction {
          font-size: 30px;
          text-indent: 2em;
          width: 840px;
          height: 165px;
        }

        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 36px 22px;
        padding: 26px 0;

        .zitem {
          box-sizing: border-box;
          padding: 36px 16px;
          padding-right: 36px;
          background-color: #eff3ff;
          height: 165px;
        }
      }

      .title {
        display: flex;
        align-items: center;
        color: #126ef9;
        font-size: 30px;
        font-weight: bold;

        img {
          height: 16px;
          margin-right: 10px;
        }
      }

      .zcontent {
        display: flex;
        justify-content: space-around;

        .text {
          font-size: 26px;
          color: #333333;
          font-weight: bold;
          padding-right: 22px;
        }
      }

      img {
        height: 67px;
      }

      .thinking {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 50px 0;

        img {
          height: 324px;
        }
      }

      .careerprospects {
        margin: 0 auto;
        margin-top: 50px;
        width: 580px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        text-align: center;
        color: #000;

        span {
          color: #126ef9;
        }

        .one {
          font-size: 46px;
          margin-bottom: 40px;
          text-align: center;
          font-weight: bold;
        }

        .careerprospectstext {
          font-size: 26px;
          margin-bottom: 40px;
          text-align: center;

          // opacity: 0;
          .color {
            color: #126ef9;
          }
        }
      }
    }
  }

  @keyframes appear {
    from {
      opacity: 0;
      transform: translateY(-160px);
    }

    to {
      opacity: 1;
      transform: translateY(0px);
    }
  }

  .block {
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0% cover 20%;
  }

  @keyframes fadeInDown {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .bli {
    animation: fadeInDown 1s ease - in - out;
  }

  .zc {
    animation: fadeInUp 1s ease - in - out;
  }
}

.record {
  .adress {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .tltle {
      color: #000000;
      font-size: 16px;
      margin-right: 20px;
    }

    .copy {
      color: #999;
      font-size: 16px;
    }
  }

  .img {
    img {
      width: 200px;
      height: 200px;
    }
  }

  .center {
    font-size: 16px;
    padding: 50px 0;
  }
}
</style>
